<template>
    <div class="container" @click="handleGallaryClose">
        <div class="wrapper">
             <swiper :options="swiperOptions">
                    <!-- slides -->
                    <swiper-slide   v-for="(item ,index) in imgs" :key="index">
                        <img   class="galler-img" :src="item">
                    </swiper-slide>
                    <!-- Optional controls -->
                    <div class="swiper-pagination"  slot="pagination"></div>
                
            </swiper>
        </div>
    </div>
</template>
<script>
export default {
    name:'CommonGallary',
    props:{
        imgs:{
            type:Array,
            default(){
               return []
            }
        }
    },
    data(){
        return {
            swiperOptions:{
                pagination:'.swiper-pagination',
                paginationType:'fraction',
                observeParents:true,
                observer:true
            }

        }
    },
    methods:{
        handleGallaryClose(){
            this.$emit('close')
        }
    }
}
</script>
<style lang="stylus" scoped>
.container >>> .swiper-container
  overflow:inherit
.container
  display:flex
  flex-direction:column
  justify-content :center
  z-index:99
  position:fixed
  left:0
  right:0
  bottom:0
  top:0
  background:#000
  .wrapper
    background:#fff
    width:100%
    height:0
    overflow :hidden
    padding-bottom:100%
    .galler-img
      width:100%
    .swiper-pagination
      color:#fff 
      bottom:.1rem
      

</style>
